<!DOCTYPE html>
<html lang="@@{website_lang}" dir="@@{website_dirLTR}">
<head>
	<meta charset="@@{website_charset}" />
	<title>Buttons - @@{website_title}</title>	
	@@include('./src/components/_global/include-header.html')
</head>  

     
  <body class="page">
  
  
          
    @@include('./src/components/_global/include-loader.html')
    @@include('./src/components/_global/include-toggle-trigger.html')
    
    

  
  
    <div class="uix-wrapper">
    
        <!-- Header Area
        ============================================= -->      
        <header class="uix-header__container">
            
             <div class="uix-header">
                 <div class="container">
                 
                        @@include('./src/components/_global/include-brand.html')
                        
                        @@include('./src/components/_global/include-menu.html')
                        
                        
                        
                        
                  </div>
                  <!-- .container end -->
                  
                  <div class="uix-clearfix"></div>
             </div>
        
        </header>
        <div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div>
      
		
		<main id="uix-maincontent">
			
			<!-- Content 
			====================================================== -->
			<section class="uix-spacing--s uix-spacing--no-bottom">
				<div class="container">
					<div class="row">
						<div class="col-12">
							<h3>Button</h3>
							<p>
									If you need to use multiple colors, you can add CSS styles yourself, such as: <code>.uix-btn__bg--blue</code>, <code>.uix-btn__bg--purple</code> ...

								</p>
							<hr>
							
							
						</div>
					</div>
					<!-- .row end -->

				</div>
				<!-- .container end -->

			</section>
			
		

		   <!-- Content 
			====================================================== -->
			<section class="uix-spacing--s">
				<div class="container">


						<div class="row">
							<div class="col-12" id="my-ajax-demo-target-button">
								
                                
								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--t uix-btn__bg--hyperlink">Tiny</a>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--hyperlink">Small</a>


								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--m uix-btn__bg--hyperlink">Medium</a>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--l uix-btn__bg--hyperlink">Large</a>

								<br>  
                                
								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--t uix-btn__bg--hyperlink2">Tiny</a>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--hyperlink2">Small</a>


								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--m uix-btn__bg--hyperlink2">Medium</a>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--l uix-btn__bg--hyperlink2">Large</a>

								<br>      
                                
                                
								<a href="#" tabindex="0"  class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--t uix-btn__bg--primary"><i class="fa fa-bullhorn" aria-hidden="true"></i>Tiny</a>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--primary"><i class="fa fa-bullhorn" aria-hidden="true"></i>Small</a>


								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--m uix-btn__bg--primary"><i class="fa fa-cogs" aria-hidden="true"></i>Medium</a>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--l uix-btn__bg--primary"><i class="fa fa-flask" aria-hidden="true"></i>Large</a>

								<br>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--t uix-btn__bg--primary">Tiny<i class="fa fa-bullhorn" aria-hidden="true"></i></a>
								
								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--primary">Small<i class="fa fa-bullhorn" aria-hidden="true"></i></a>


								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--m uix-btn__bg--primary">Medium<i class="fa fa-cogs" aria-hidden="true"></i></a>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--l uix-btn__bg--primary">Large<i class="fa fa-flask" aria-hidden="true"></i></a>

								<br>


								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--primary uix-btn__icon uix-btn__icon--right"><span><i class="fa fa-bullhorn" aria-hidden="true"></i></span>Icon Right</a>


								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--primary uix-btn__icon uix-btn__icon--left"><span><i class="fa fa-cogs" aria-hidden="true"></i></span>Icon Left</a>


								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--primary is-pill is-transparent uix-btn__icon uix-btn__icon--right"><span><i class="fa fa-bullhorn" aria-hidden="true"></i></span>Icon Left</a>


								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--primary is-pill is-transparent uix-btn__icon uix-btn__icon--left"><span><i class="fa fa-cogs" aria-hidden="true"></i></span>Icon Right</a>


								<br>
								
								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--t uix-btn__bg--primary is-disabled">Tiny</a>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--primary is-disabled">Small</a>


								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--m uix-btn__bg--primary is-disabled">Medium</a>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--l uix-btn__bg--primary is-disabled">Large</a>

								<br>
								

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--t uix-btn__bg--primary is-waiting">Tiny</a>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--primary is-waiting">Small</a>


								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--m uix-btn__bg--primary is-waiting">Medium</a>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--l uix-btn__bg--primary is-waiting">Large</a>

								<br>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--t uix-btn__bg--primary is-pill">Tiny</a>

								
								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--primary is-pill">Small</a>


								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--m uix-btn__bg--primary is-pill">Medium</a>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--l uix-btn__bg--primary is-pill">Large</a>



								<br>

								
								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--t uix-btn__bg--primary is-rounded">Tiny</a>


								
								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--primary is-rounded">Small</a>


								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--m uix-btn__bg--primary is-rounded">Medium</a>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--l uix-btn__bg--primary is-rounded">Large</a>


								<br>


								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--t uix-btn__bg--primary is-pill is-transparent">Tiny Radius</a>
	
								
								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--primary is-pill is-transparent">Small Radius</a>


								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--m uix-btn__bg--primary is-pill is-transparent">Medium Radius</a>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--l uix-btn__bg--primary is-pill is-transparent">Large Radius</a>


								<hr>

								<div class="uix-btn__group uix-btn__margin--b">
									<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--primary is-pill is-transparent">Group</a>


									<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--primary is-pill is-transparent">Group</a>

									<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--primary is-pill is-transparent">Group</a>
								</div>

								 <br>


								<div class="uix-btn__group uix-btn__margin--b">
									<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--primary">Group</a>


									<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--primary">Group</a>

									<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--primary">Group</a>
								</div>





								<hr>



								<div class="uix-btn__group is-fullwidth uix-btn__margin--b">
									<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--primary is-pill is-transparent">Group</a>


									<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--primary is-pill is-transparent">Group</a>

									<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--primary is-pill is-transparent">Group</a>
								</div>

								 <br>


								<div class="uix-btn__group is-fullwidth uix-btn__margin--b">
									<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--primary">Group</a>


									<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--primary">Group</a>

									<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__size--s uix-btn__bg--primary">Group</a>
								</div>





								<hr>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--t uix-btn__bg--primary is-fullwidth">Tiny Full Width</a>
								

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--primary is-fullwidth">Small Full Width</a>

								<br>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--m uix-btn__bg--primary is-fullwidth">Medium Full Width</a>

								<br>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--l uix-btn__bg--primary is-fullwidth">Large Full Width</a>

								<br>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--t uix-btn__bg--primary is-fullwidth is-pill">Tiny Full Width Radius</a>
								
								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--primary is-fullwidth is-pill">Small Full Width Radius</a>

								<br>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--m uix-btn__bg--primary is-fullwidth is-pill">Medium Full Width Radius</a>

								<br>

								<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--l uix-btn__bg--primary is-fullwidth is-pill">Large Full Width Radius ( More Text )</a>


							</div>     


						</div>
						<!-- .row end -->  


				</div>
				<!-- .container end -->



			</section>

			
			<!-- Content 
			====================================================== -->
			<section class="uix-spacing--s uix-spacing--no-bottom">
				<div class="container">
					<div class="row">
						<div class="col-12">
							<h3>Secondary Button</h3>
					
						</div>
					</div>
					<!-- .row end -->

				</div>
				<!-- .container end -->

			</section>
			
		   <!-- Content 
			====================================================== -->
			<section class="uix-spacing--s">
				<div class="container">


						<div class="row">
							<div class="col-12">
								

                                <a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--secondary is-fill-white">Secondary Button</a>
                                
                                <a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--secondary is-rounded is-fill-white">Secondary Button</a>

                                <a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--secondary is-pill is-fill-white">Secondary Button</a>


                                <br> 

                                
								<div class="uix-t-c" style="background: #333; padding: 1.5rem 0 0; margin-top: 1rem;">

									<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--secondary is-fill-white">White Button</a>

									<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--secondary">White Button</a>

									<br>

									<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--secondary is-pill is-fill-white">White Button</a>

									<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--secondary is-pill">White Button</a>


									<br>

									<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--secondary is-fill-white uix-btn__icon uix-btn__icon--right"><span><i class="fa fa-bullhorn" aria-hidden="true"></i></span>Icon Right</a>


									<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--secondary is-fill-white uix-btn__icon uix-btn__icon--left"><span><i class="fa fa-cogs" aria-hidden="true"></i></span>Icon Left</a>


									<br>

									<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--secondary uix-btn__icon uix-btn__icon--right"><span><i class="fa fa-bullhorn" aria-hidden="true"></i></span>Icon Right</a>


									<a href="#" tabindex="0" class="uix-btn uix-btn__border--thin uix-btn__margin--b uix-btn__size--s uix-btn__bg--secondary uix-btn__icon uix-btn__icon--left"><span><i class="fa fa-cogs" aria-hidden="true"></i></span>Icon Left</a>

									<br>



								</div>


							</div>     


						</div>
						<!-- .row end -->  


				</div>
				<!-- .container end -->



			</section>
      
            
		</main>
		
     
			
        
        
        
        @@include('./src/components/_global/include-copyright.html')
        
        
    </div>
    <!-- .uix-wrapper end -->
       
       
    @@include('./src/components/_global/include-footer.html')

